<template>
  <a-modal
    centered
    title="选择用户"
    width="60%"
    :visible="visible"
    @ok="handleOk"
    @cancel="close"
    cancelText="关闭">
    <a-row :gutter="18">
      <a-col :span="16">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @submit="handleSubmit">
            <a-row :gutter="24">
              <a-col :span="14">
                <a-form-item >
                  <a-input v-model="queryParam.username" placeholder="请输入用户名"/>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button htmlType="submit" type="primary">查询</a-button>
                  <a-button @click="() => queryParam = {}" style="margin-left: 8px">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
          <s-table
            ref="table"
            :data="loadData"
            :columns="columns"
            :rowKey="record => record.userId"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"/>
        </div>
      </a-col>

      <a-col :span="8">
        <a-card title="已选用户" :bordered="false" :head-style="{padding:0}" :body-style="{padding:0}">
          <a-tag
            v-for="item in selectedRows"
            :key="item.userId || item.key"
            closable
            @close="removeTag(item.userId || item.key)">
            {{ item.username || item.label }}
          </a-tag>
        </a-card>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { fetchList } from '@api/sys/user'
import { TableMixin } from '@/mixins/TableMixin'
import { pushIfNotExist } from '@/utils/util'
export default {
  name: 'UserSelectModal',
  mixins: [TableMixin],
  props: {
    value: {
      type: Array,
      default: () => []
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler (val) {
        this.selectedRowKeys = []
        this.selectedRows = []
        this.filterSelectUser(val)
      }
    }
  },
  data () {
    return {
      queryParam: {
        username: ''
      },
      columns: [
        {
          title: '用户名',
          sorter: true,
          dataIndex: 'username'
        },
        {
          title: '手机号',
          sorter: true,
          dataIndex: 'phone'
        }
      ],
      loadData: parameter => {
        return fetchList(
          Object.assign(parameter, this.queryParam)
        ).then(res => {
          return res.data
        })
      }
    }
  },
  methods: {
    handleOk () {
      const value = this.selectedRows.map((data) => {
        var option = {
          key: '',
          label: ''
        }
        option.key = data.userId || data.key
        option.label = data.username || data.label
        return option
      })
      this.$emit('input', value)
      this.close()
    },
    close () {
      this.selectedRowKeys = []
      this.selectedRows = []
      this.$emit('update:visible', false)
    },
    removeTag (userId) {
      this.selectedRowKeys = this.selectedRowKeys.filter(tagId => tagId !== userId)
      this.selectedRows = this.selectedRows.filter(tag => {
        if (tag.userId) {
          return tag.userId !== userId
        } else if (tag.key) {
          return tag.key !== userId
        }
      })
    },
    filterSelectUser (selectedUser) {
      selectedUser.forEach(item => {
        pushIfNotExist(this.selectedRowKeys, item.key)
        pushIfNotExist(this.selectedRows, item)
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
